<template>
  <el-dialog
    :title="!dataForm.id ? $t('brand.add') : $t('user.editBtn')"
    :close-on-click-modal="false"
    :visible.sync="visible"
    @closed="closeDialog"
    width="630px"
  >
    <el-form
      @submit.native.prevent
      class="dialog-form"
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      :label-width="this.$i18n.t('language') === 'English' ? '150px' : '80px'"
    >

      <el-form-item :label="$t('outlet.tagName')" prop="name">
        <el-input
          size="small"
          maxlength="36"
          v-model="dataForm.name"
          style="width: 270px"
        ></el-input>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <div class="default-btn" @click="visible = false">
        {{ $t("remindPop.cancel") }}
      </div>
      <div class="default-btn primary-btn" @click="dataFormSubmit()">
        {{ $t("remindPop.confirm") }}
      </div>
    </span>
  </el-dialog>
</template>

<script>
  import { deepCopy } from "@/utils";
  export default {
    data() {
      var validateTitle = (rule, value, callback) => {
        if (String(value).trim() === "") {
          callback(new Error(this.$i18n.t("shop.tagNameNotNull")));
        } else {
          callback();
        }
      };
      return {
        visible: false,
        id: 0,
        dataForm: {
          name: "",
        },
        isSubmit: false,
        dataRule: {
          name: [
            {
              required: true,
              message: this.$i18n.t("shop.tagNameNotNull"),
              trigger: "blur",
            },
            { validator: validateTitle, trigger: "blur" },
          ],
        },
      };
    },
    components: {},
    mounted() {},
    methods: {
      init(item) {
        this.visible = true;
        if (item && item.id) {
          this.id = item.id;
          this.dataForm = deepCopy(item);
        }
      },
      // 提交
      dataFormSubmit() {
        this.$refs["dataForm"].validate((valid) => {
          if (!valid) {
            return;
          }
          this.$http({
            url: this.$http.adornUrl("/platform/brandTag"),
            method: this.id ? "put" : "post",
            data: this.$http.adornData(this.dataForm),
          }).then(() => {
            this.$message({
              message: this.$i18n.t("outlet.success"),
              type: "success",
            });
            this.visible = false;
          });
        });
      },
      // 选择分类改变时同步改变dataForm中数据
      handleChange(value) {
        if (value.length > 0) {
          this.dataForm.categoryId = value[value.length - 1];
        } else {
          this.dataForm.categoryId = 0;
        }
      },
      closeDialog() {
        this.$emit("refreshChange");
        this.$refs.dataForm.resetFields();
        this.id = 0;
      },
    },
  };
</script>

<style lang="scss" scoped>
</style>
